<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>注册</title>
	<!--<link rel="stylesheet" type="text/css" href="registerCssJs/common.css">-->
	<link rel="stylesheet" href="registerCssJs/register.css">

	<script src="static/js/jquery-ui.min.js"></script>
	<script src="static/js/bootstrap.min.js"></script>
	<script src="static/js/imageloded.min.js"></script>
	<script src="static/js/counterup.js"></script>
	<script src="static/js/waypoint.js"></script>
	<script src="static/js/magnific.min.js"></script>
	<script src="static/js/isotope.pkgd.min.js"></script>
	<script src="static/js/nice-select.min.js"></script>
	<script src="static/js/fontawesome.min.js"></script>
	<script src="static/js/owl.min.js"></script>
	<script src="static/js/slick-slider.min.js"></script>
	<script src="static/js/wow.min.js"></script>
	<script src="static/js/tweenmax.min.js"></script>
	<!-- Stylesheet -->
	<link rel="stylesheet" href="static/css/animate.min.css">
	<link rel="stylesheet" href="static/css/bootstrap.min.css">
	<link rel="stylesheet" href="static/css/magnific.min.css">
	<link rel="stylesheet" href="static/css/nice-select.min.css">
	<link rel="stylesheet" href="static/css/owl.min.css">
	<link rel="stylesheet" href="static/css/slick-slide.min.css">
	<link rel="stylesheet" href="static/css/fontawesome.min.css">
	<link rel="stylesheet" href="static/css/remixicon.css">
	<link rel="stylesheet" href="static/css/style.css">
	<link rel="stylesheet" href="static/css/responsive.css">
<!--	<link rel="stylesheet" href="static/css/register.css">-->
	<!--导入jquery-->
	<script src="registerCssJs/jquery-3.3.1.js"></script>
	<script src="registerCssJs/jquery.validate.min.js"></script>
	<script>
		$(function() {
			$("#registButton").click(function() {
				// 表单验证通过才能注册
				var isPass = $("#registerForm").valid();
				if (!isPass) {
					return;
				}
				$.post("/Pizza_war_exploded/User/register",
						$("#registerForm").serialize(),
						function(data) {
							if (data.flag) {
								// 注册成功 页面跳转
								location.href = "/Pizza_war_exploded/register_ok.html";
							} else { // 注册失败
								$("#errorMsg").html(data.errorMsg);
							}
						},
						"json");
			});
			$("#registerForm").validate({
				rules: {
					username: {
						// 正则表达式
						checkUsername: true,
						// 用户名不能重复
						checkUsernameExists: true
					},
					password: {
						required: true
					},
					email: {
						required: true,
						email: true,
					},
					name: {
						required: true,
					},
					telephone: {
						required: true,
						number: true
					},
					check: {
						required: true,
						// 验证码是否正确
						checkCode: true,
					},
				},
				// 校验失败要调用的方法
				errorPlacement: function(){}
			});
			// 判断用户名格式是否规范
			$.validator.addMethod("checkUsername",
					function (value,element,params) {
						var reg = /^[a-zA-Z_]\w{5,15}$/;
						return reg.test(value);
					});
			// 判断用户名是否存在
			$.validator.addMethod("checkUsernameExists",
					function (value,element,params) {
						var isPass = false;
						$.ajax({
							async: false,
							url: "/Pizza_war_exploded/User/checkUsername",
							data: {username: value},
							success: function(data) {
								isPass = data.flag;
							},
							dataType: "json"
						});
						return isPass;
					});
			// 判断验证码是否正确
			$.validator.addMethod("checkCode",
					function (value,element,params) {
						var isPass = false;
						$.ajax({
							async: false,
							url: "/Pizza_war_exploded/check/checkCodeValue",
							data: {check: value},
							success: function(data) {
								isPass = data.flag;
							},
							dataType: "json"
						});
						return isPass;
					});
		});
	</script>
</head>
<body class='sc5'>
<!-- preloader area start -->
<div class="preloader" id="preloader">
	<div class="preloader-inner">
		<div id="wave1">
		</div>
		<div class="spinner">
			<div class="dot1"></div>
			<div class="dot2"></div>
		</div>
	</div>
</div>
<!-- preloader area end -->
<!-- search popup area start -->
<div class="body-overlay" id="body-overlay"></div>
<div class="td-search-popup" id="td-search-popup">
	<form action="index.html" class="search-form">
		<div class="form-group">
			<input type="text" class="form-control" placeholder="Search.....">
		</div>
		<button type="submit" class="submit-btn"><i class="fa fa-search"></i></button>
	</form>
</div>
<!-- //. search Popup -->
<!--引入头部-->
<div id="header"></div>
<!-- 头部 end -->
<div class="rg_layout">
	<div class="rg_form clearfix">
		<div class="rg_form_left">
			<p>新用户注册</p>
			<p>USER REGISTER</p>
		</div>
		<div class="rg_form_center">
			<div id="errorMsg"></div>
			<!--注册表单-->
			<form id="registerForm">
				<!--提交处理请求的标识符-->
				<input type="hidden" name="action" value="register">
				<table style="margin-top: 25px;">
					<tr>
						<td class="td_left">
							<label for="username">用户名</label>
						</td>
						<td class="td_right">
							<input type="text" id="username" name="username" placeholder="请输入账号">
						</td>
					</tr>
					<tr>
						<td class="td_left">
							<label for="password">密码</label>
						</td>
						<td class="td_right">
							<input type="password" id="password" name="password" placeholder="请输入密码">
						</td>
					</tr>
					<tr>
						<td class="td_left">
							<label for="email">Email</label>
						</td>
						<td class="td_right">
							<input type="text" id="email" name="email" placeholder="请输入Email">
						</td>
					</tr>
					<tr>
						<td class="td_left">
							<label for="name">姓名</label>
						</td>
						<td class="td_right">
							<input type="text" id="name" name="name" placeholder="请输入真实姓名">
						</td>
					</tr>
					<tr>
						<td class="td_left">
							<label for="telephone">手机号</label>
						</td>
						<td class="td_right">
							<input type="text" id="telephone" name="telephone" placeholder="请输入您的手机号">
						</td>
					</tr>
					<tr>
						<td class="td_left">
							<label for="sex">性别</label>
						</td>
						<td class="td_right gender">
							<input type="radio" id="sex" name="sex" value="男" checked> 男
							<input type="radio" name="sex" value="女"> 女
						</td>
					</tr>
					<tr>
						<td class="td_left">
							<label for="check">验证码</label>
						</td>
						<td class="td_right check">
							<input type="text" id="check" name="check" class="check">
							<img src="/Pizza_war_exploded/check/checkCode" height="32px" alt="" onclick="changeCheckCode(this)">
							<script type="text/javascript">
								//图片点击事件
								function changeCheckCode(img) {
									img.src="/Pizza_war_exploded/check/checkCode?"+new Date().getTime();
								}
							</script>
						</td>
					</tr>
					<tr>
						<td class="td_left">
						</td>
						<td class="td_right check">
							<input type="button" id="registButton" class="submit" value="注册">
							<span id="msg" style="color: red;"></span>
						</td>
					</tr>
				</table>
			</form>
		</div>
		<div class="rg_form_right">
			<p>
				已有账号？
				<a href="login.html">立即登录</a>
			</p>
		</div>
	</div>
</div>
<!--引入尾部-->
<div id="footer"></div>
<!--导入布局js，共享header和footer-->
<script src="static/js/main.js"></script>
<script type="text/javascript" src="static/js/include.js"></script>

</body>
</html>